/**
 * Created by Ji.wenjiang on 2016/9/18.
 */

angular.module('inspinia')
  .controller('echartsCtrl', function ($scope, $timeout, $log, values, throttleFn) {
    init();
    function init() {
      $("#echartsLine").width = $("#echartsContainer").width();

      $scope.myChart = echarts.init(document.getElementById('echartsLine'));

      // 指定图表的配置项和数据
      $scope.ydata = [];
      $scope.xdata = [];
      $scope.ydata2 = [];
      $scope.ydata3 = [];
      $scope.ydata4 = [];

      $.getJSON('app/EBP/dvhData/Dvh/data2.json', function (data) {
        $scope.divData2 = data.rawDvhData;
        angular.forEach($scope.divData2, function (data, index, array) {
          if (index % 2 != 0) {
            $scope.ydata2.push(data);
            // $log.debug((index+1)/2);
          }
        })
      })
      $.getJSON('app/EBP/dvhData/Dvh/data3.json', function (data) {
        $scope.divData3 = data.rawDvhData;
        angular.forEach($scope.divData3, function (data, index, array) {
          if (index % 2 != 0) {
            $scope.ydata3.push(data);
            // $log.debug((index+1)/2);
          }
        })
      })
      $.getJSON('app/EBP/dvhData/Dvh/data4.json', function (data) {
        $scope.divData4 = data.rawDvhData;
        angular.forEach($scope.divData4, function (data, index, array) {
          if (index % 2 != 0) {
            $scope.ydata4.push(data);
            // $log.debug((index+1)/2);
          }
        })
      })


      $.getJSON('app/EBP/dvhData.json', function (data) {
        $scope.divData = data.rawDvhData;
        // $log.debug(data.rawDvhData);
        angular.forEach($scope.divData, function (data, index, array) {
          if (index % 2 != 0) {
            $scope.ydata.push(data);
            $scope.xdata.push((index + 1) / 2);
            // $log.debug((index+1)/2);
          }
        })

        $scope.option = {
          backgroundColor: 'black',
          title: {
            text: '折线图堆叠',
            textStyle: {
              color: '#fff'
            }
          },
          dataZoom: [{
            type: 'inside',
            xAxisIndex: [0],
            start: 0,
            end: 100
          }],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
            textStyle: {
              color: "#ffffff"
            }
          },

          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',

            nameTextStyle: {
              color: '#fff'
            },
            boundaryGap: false,
            data: $scope.xdata
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#28c6de',
              align: 'left'
            }
          },
          yAxis: {
            type: 'value',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            // {
            //   name:'联盟广告',
            //   type:'line',
            //   stack: '总量',
            //   data:[220, 182, 191, 234, 290, 330, 310]
            // },
            // {
            //   name:'视频广告',
            //   type:'line',
            //   stack: '总量',
            //   data:[150, 232, 201, 154, 190, 330, 410]
            // },
            // {
            //   name:'直接访问',
            //   type:'line',
            //   stack: '总量',
            //   data:[320, 332, 301, 334, 390, 330, 320]
            // },
            // {
            //   name:'搜索引擎',
            //   type:'line',
            //   stack: '总量',
            //   data:[820, 932, 901, 934, 1290, 1330, 1320]
            // }
          ]
        };
        $scope.option.series.push({
          name: '曲线1',
          type: 'line',
          data: $scope.ydata
        })
        $scope.option.series.push({
          name: '曲线2',
          type: 'line',
          data: $scope.ydata2
        })
        $scope.option.series.push({
          name: '曲线3',
          type: 'line',
          data: $scope.ydata3
        })
        $scope.option.series.push({
          name: '曲线4',
          type: 'line',
          data: $scope.ydata4
        })
        $scope.myChart.setOption($scope.option);
      })
    }

    $scope.showLine = function () {
      $log.debug(event.target.id);
      switch (event.target.id) {
        case "ajson3_anchor":
          showLine2();
          break;
        case "ajson4_anchor":
          showLine3();
          break;
        case "ajson5_anchor":
          showLine4();
          break;
        default:
          break;

      }
    }
    function showLine2() {
      $scope.option.series.push({
        name: '曲线2',
        type: 'line',

        data: $scope.ydata2
      })
      $scope.myChart.setOption($scope.option);
    }

    function showLine3() {
      $scope.option.series.push({
        name: '曲线3',
        type: 'line',

        data: $scope.ydata3
      })
      $scope.myChart.setOption($scope.option);
    }

    function showLine4() {
      $scope.option.series.push({
        name: '曲线4',
        type: 'line',
        data: $scope.ydata4
      })
      $scope.myChart.setOption($scope.option);
    }

  })
